<template>
  <div class="container">
    <div style="background-color: #ffffff; padding-top: 10px; display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;">
      <h1 style="font-size: 27px; color: #333333; text-align: center;">进行排班</h1>
    </div>

    <van-form >
        <span style="font-size: 20px;">请选择科室：</span>
        <van-dropdown-menu style=" margin-top: 10px;margin-bottom: 15px;">
          <van-dropdown-item v-model="value1" :options="option1"/>
        </van-dropdown-menu>

      <span style="font-size: 20px;">请选择医生：</span>
      <van-dropdown-menu style=" margin-top: 10px;margin-bottom: 15px;">
        <van-dropdown-item v-model="value2" :options="option2"/>
      </van-dropdown-menu>

      <!-- 日历选择器 -->
        <span style="font-size: 20px;">请选择日期：</span>
        <van-cell style="height: 50px;margin-top: 10px; margin-bottom: 15px;font-size: 20px;" title="" :value="date" @click="show = true"/>
        <van-calendar v-model:show="show" @confirm="onConfirm" />

      <span style="font-size: 20px;">请选择诊室：</span>
      <van-dropdown-menu style=" margin-top: 10px;margin-bottom: 15px;">
        <van-dropdown-item v-model="value3" :options="option3"/>
      </van-dropdown-menu>

      <span style="font-size: 20px;">请选择该科室排班规则：</span>
      <van-dropdown-menu style=" margin-top: 10px;margin-bottom: 15px;">
        <van-dropdown-item v-model="value4" :options="option4"/>
      </van-dropdown-menu>

        <van-button type="primary" native-type="submit" @click="startArrangement()">生成排班和号源池</van-button>
<!--      <van-dialog  v-if="loadingVisible" title="生成中" :show-confirm-button="false">-->
          <van-progress style=" margin-top: 40px;" v-if="loadingVisible" :percentage="progress" stroke-width="8"/>
          <div class="toast" v-if="toastVisible">{{ toastText }}</div>
<!--      </van-dialog>-->
    </van-form>
  </div>
</template>
<script setup>
import {onMounted, ref, watch} from 'vue';
import {
  ArrangementService,
  BusinessService,
  ConsultationRoomService,
  DepartService,
  EmployeeService
} from "@/api/api";

let date = ref('');
const show = ref(false);

let formatDate = (date) => `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;

let date1 = '-1';
const onConfirm = (value) => {
  show.value = false;
  date.value = formatDate(value);
  date1 = date.value;
};

let data1 = 0;
let data2 = 0;
let data3 = 0;
let data4 = 0;

let value1 = ref(-1);
let option1 = ref([
  {
    text: '',
    value: -1
  }
]);
let value2 = ref(-1);
let option2 = ref([
  {
    text: '',
    value: -1
  }
]);
let value3 = ref(-1);
let option3= ref([
  {
    text: '',
    value: -1
  }
]);
let value4= ref(-1);
let option4= ref([
  {
    text: '',
    value: -1
  }
]);
// 在组件挂载时异步获取数据
onMounted(async () => {
  try {
    const response = await DepartService.listHandle(); // 调用 API 请求方法获取数据
    option1.value = response.data.map(depart => ({
      text: depart.dname,
      value: depart.departId
    })); // 将返回的链表数据转换成下拉菜单选项的格式并赋值给 option1
  } catch (error) {
    console.error('获取数据失败：', error);
  }
});

// 监听科室选择的变化
watch(value1, async (newValue) => {
  if (newValue !== -1) { // 确保选择的值不为默认值
    try {
      const response = await EmployeeService.listAllByDepartmentId(newValue.toString()); // 向后端发送请求，传入选定的科室 id
      const response1 = await ConsultationRoomService.getListByDepartID(newValue.toString());
      const response2 = await BusinessService.findAllByDepartmentId(newValue.toString());
      data1=newValue;
      option2.value = response.data.map(employee => ({
        text: employee.ename,
        value: employee.employeeId
      })); // 将返回的医生列表数据转换成下拉菜单选项的格式并赋值给 option2

      option3.value = response1.data.map(consulationRoomItemVO => ({
        text: consulationRoomItemVO.label,
        value: consulationRoomItemVO.value
      })); // 将返回的医生列表数据转换成下拉菜单选项的格式并赋值给 option2
      option4.value = response2.data.map(business => ({
        text: business.businessName,
        value: business.businessId
      })); // 将返回的医生列表数据转换成下拉菜单选项的格式并赋值给 option2
      console.log(option4.value)
    } catch (error) {
      console.error('获取医生数据失败：', error);
    }
  } else {
    option2.value = [{
      text: '-1',
      value: -1
    }]; // 如果选择的是默认值，清空医生选项
  }
});
// 监听多个数据的变化
watch(
    [value2, value3, value4],
    async ([newValue2, newValue3, newValue4]) => {
      if (newValue2 !== -1) {
        // 处理 value2 的变化
        try {
          // 发送请求并处理响应
          data2 = newValue2;
        } catch (error) {
          console.error('获取数据失败：', error);
        }
      }

      if (newValue3 !== -1) {
        // 处理 value3 的变化
        try {
          // 发送请求并处理响应
          data3 = newValue3;
          // 其他逻辑处理...
        } catch (error) {
          console.error('获取数据失败：', error);
        }
      }

      if (newValue4 !== -1) {
        // 处理 value4 的变化
        try {
          // 发送请求并处理响应
          data4 = newValue4;
          // 其他逻辑处理...
        } catch (error) {
          console.error('获取数据失败：', error);
        }
      }
    }
);

let loadingVisible = ref(false);
let progress = ref(0);
let toastVisible = ref(false);
let toastText = ref('');

const startArrangement = async () => {
  try {
    loadingVisible.value = true;
    progress.value = 0;
    const interval = setInterval(() => {
      progress.value += 10;
      if (progress.value >= 100) {
        clearInterval(interval);
        loadingVisible.value = false;
        toastVisible.value = true;
        toastText.value = '生成排班和号源池成功！';
        setTimeout(() => {
          toastVisible.value = false;
        }, 1200);
      }
    }, 300);

    const arrangementDTO = {
      departmentId: data1,
      employeeId: data2,
      arrangementDt: date1,
      consultationId: data3,
      businessId: data4
    };
    console.log(arrangementDTO);

    // 执行其他异步操作
    await ArrangementService.saveArrangement(arrangementDTO);
  } catch (error) {
    console.error(error); // 处理错误
  }
};

</script>

<style>
/* 全局样式 */
body {
  font-family: Arial, sans-serif; /* 使用通用字体 */
  padding: 20px; /* 添加页面内边距 */
}

/* 表单样式 */
van-form {
  max-width: 400px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中对齐 */
}

/* 表单项样式 */
van-cell {
  margin-bottom: 16px; /* 设置下方间距 */
}


/* 按钮样式 */
van-button {
  width: 100%; /* 按钮宽度100% */
}
.toast {
  margin-top: 40px;
  padding: 10px;
  background-color: #f2f2f2;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
}
</style>
